<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery/jquery-1.11.2.js"></script>
<!--    <script src="../Highcharts-9.0.1/code/highcharts.js"></script>
    <script src="../Highcharts-9.0.1/code/highcharts-3d.js"></script>
    <script src="../Highcharts-9.0.1/code/modules/data.js"></script>-->
    <link rel="stylesheet" type="text/css" href="/css/font.css">
</head>
<style>::-webkit-scrollbar{display: none;}</style>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
    $(document).ready(function() {
        var data = {
            table: 'datatable'
        };
        var chart = {
            type: 'column'
        };
        var title = {
            text: '从网页中的 HTML 表格中读取数据'
        };
        var yAxis = {
            allowDecimals: false,
            title: {
                text: 'Units'
            }
        };
        var tooltip = {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.point.y + ' ' + this.point.name.toLowerCase();
            }
        };
        var credits = {
            enabled: false
        };

        var json = {};
        json.chart = chart;
        json.title = title;
        json.data = data;
        json.yAxis = yAxis;
        json.credits = credits;
        json.tooltip = tooltip;
        $('#container').highcharts(json);
    });

</script>
<table id="datatable">
    <thead>
    <tr><th></th><th>Jane</th><th>John</th><th>jj</th></tr>
    </thead>
    <tbody>
    <tr><th>Apples</th><td>3</td><td>40000000</td></tr>
    <tr><th>Pears</th><td>2</td><td>67865</td></tr>
    <tr><th>Plums</th><td>5</td><td>789811</td></tr>
    <tr><th>Bananas</th><td>1</td><td>6655651</td></tr>
    <tr><th>Oranges</th><td>2</td><td>9874</td></tr>
    </tbody>
</table>
</body>
</html>